<template>
	<view class="content">
		<view class="form bordertop">
			<view class="form-item borderbottom">
				<view class="form-item-left">门店名称</view>
				<view class="form-item-right">
					<input placeholder="请输入门店名称" placeholder-class="form-item-right-place" v-model="name" />
				</view>
			</view>
			<view class="form-item borderbottom">
				<view class="form-item-left">联系电话</view>
				<view class="form-item-right">
					<input placeholder="请输入手机号码" placeholder-class="form-item-right-place" v-model="phone" maxlength="11" />
				</view>
			</view>
			<view class="form-item borderbottom">
				<view class="form-item-left">门店地址</view>
				<view class="form-item-right">
					<input placeholder="请输入门店地址" placeholder-class="form-item-right-place" v-model="address" />
				</view>
			</view>
			<view class="form-address">
				<view class="form-address-left">门店详细地址</view>
				<view class="form-address-right">
					<textarea placeholder="请输入详细地址" placeholder-class="form-address-right-place" v-model="detailAddress" />
					</view>
			</view>
		</view>
		<view class="confirm-btn" @tap="confirm()">提交申请</view>
	</view>
</template>

<script>
	import config from '@/common/config.js'
	export default {
		data() {
			return {
				apiUrl: config.apiHost,
				imgUrl: config.ImageUrl,
				role: 0,
				userId: uni.getStorageSync('userId'),
				phone:'',
				name:'',
				address:'',
				detailAddress:''
			}
		},
		methods: {
			confirm(){
				var regPhone = /^[1][3,4,5,7,8][0-9]{9}$/; //验证手机号
				//验证姓名非空
				if ((this.name == "") || (this.name == undefined) || (this.name == null)) {
					uni.showToast({
						icon: 'none',
						title: '请输入门店名称'
					});
					return;
				}
				//验证手机号
				if ((this.phone == "") || (this.phone == undefined) || (this.phone == null)) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					});
					return;
				} else if (!regPhone.test(this.phone)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确格式的手机号'
					});
					return;
				}
				//验证所在地非空
				if ((this.detailAddress == "") || (this.detailAddress == undefined) || (this.detailAddress == null)) {
					uni.showToast({
						icon: 'none',
						title: '请输入详细地址'
					});
					return;
				}
				//验证详细地址非空
				if ((this.address == "") || (this.address == undefined) || (this.address == null)) {
					uni.showToast({
						icon: 'none',
						title: '请输入地址'
					});
					return;
				}
				uni.request({
					url: this.apiUrl + '/api/store/insertStore',
					method: 'POST',
					contentType: 'application/jason',
					data: {
						storeName: this.name,
						address: '地址：'+this.address+'   详细地址：'+this.detailAddress,
						telephone: this.phone,
						userId: this.userId
					},
					success: res => {
						if(res.data.code==200){
							uni.navigateBack({})
						}else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					},
				});
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
	}

	.form {
		height: 472upx;
		width: 100%;
		background-color: #FFF;
		border-top: 1upx solid rgba(0, 0, 0, 0.3);
	}

	.borderbottom {
		border-bottom: 1upx solid rgba(236, 236, 236, 1);
	}

	.form-item {
		margin-left: 24upx;
		height: 100upx;
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}
	.form-item-right-place {
		width: 100%;
		line-height: 100upx;
	}
	input {
		width: 100%;
		height: 100%;
		line-height: 100upx;
	}
	.form-address-right-place {
		width: 100%;
	}
	
	textarea {
		width: 100%;
		height: 100%;
		padding-top: 30upx;
	}
	
	.form-address {
		margin-left: 24upx;
		height: 160upx;
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}
	
	.form-address-left{
		width: 236upx;
		height: 160upx;
		font-size: 32upx;
		font-family: PingFangSC;
		color: rgba(140, 140, 140, 1);
		padding-top: 30upx;
	}

	.form-item-left {
		width: 236upx;
		height: 100upx;
		font-size: 32upx;
		font-family: PingFangSC;
		color: rgba(140, 140, 140, 1);
		line-height: 100upx;
	}
	
	.form-item-right {
		height: 100upx;
		position: absolute;
		right: 30upx;
		left: 270upx;
	}
	
	.form-address-right {
		height: 160upx;
		position: absolute;
		right: 30upx;
		left: 270upx;
	}

	.confirm-btn {
		margin: 20upx 30upx;
		height: 88upx;
		color: #FFF;
		background-color: rgba(250, 114, 58, 1);
		border-radius: 12upx;
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		text-align: center;
		line-height: 88upx;
	}
</style>
